// 项目案列
<template>
  <div class="project-case">
    <!-- 头部盒子 -->
    <header>
      <h6>项目案例</h6>
    </header>
    <!-- 中间悬浮模块 -->
    <div class="middle">
      <el-tabs type="card" :stretch="true">
        <el-tab-pane
          :class="{'el-tab-pane-change' : isPane }"
          :label="value.label"
          v-for="(value,index) in middleImgs"
          :key="index"
          :lazy="true"
        >
          <div
            class="img-item"
            v-for="(img,name) in value.imgs "
            :key="name"
            :style="`background:url(${img})`"
          >
            <div class="hide-text">
              <h1>深圳华润春笋</h1>
              <p>华润深圳湾国际商业中心项目建筑面积70万平方，其中华润总部大厦（春笋）高达400米，是高新区域重点项目</p>
              <button>查看详情</button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 底部轮播图 -->
    <footer>
      <swiper ref="mySwiper" :options="swiperOptions" class="swiper-outside">
        <swiper-slide class="swiper-text" v-for="(value,index) in swiperText" :key="index">
          <h1>{{value.title}}</h1>
          <img :src="value.imgSrc" />
          <p>{{value.text}}</p>
          <p>{{value.person}}</p>
        </swiper-slide>

        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </footer>
  </div>
</template>
<script>
export default {
  name: "ProjectCase",
  data() {
    return {
      swiperOptions: {
        autoplay: {
          delay: 2000,
          disableOnInteraction: false
        },
        speed: 2000,//滑动时间
        pagination: {
          el: ".swiper-pagination",
           clickable :true,//点击按钮切换
        },
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        loop: true
      },
      // footer部分假数据
      swiperText: [
        {
          title: "我们的客户说",
          imgSrc: require("../../../assets/img/BiGuiYuan-logo.png"),
          text:
            "服务不是作秀，以真诚之心，换以客户的放心，从而增加其信心，达到最高品质的服务，然后获取客户最深的尊重，始终遵循“碧桂园给您一个五星级的家”的服务理念，这才是物业的最高目标及动力源泉！",
          person: "碧桂园物业—李长江 总经理"
        },
        {
          title: "我们的客户bu说",
          imgSrc: require("../../../assets/img/BiGuiYuan-logo.png"),
          text:
            "服务不是作秀，以真诚之心，换以客户的放心，从而增加其信心，达到最高品质的服务，然后获取客户最深的尊重，始终遵循“碧桂园给您一个五星级的家”的服务理念，这才是物业的最高目标及动力源泉！",
          person: "碧桂园物业—李长江 总经理"
        },
        {
          title: "我们的客户bubu说",
          imgSrc: require("../../../assets/img/BiGuiYuan-logo.png"),
          text:
            "服务不是作秀，以真诚之心，换以客户的放心，从而增加其信心，达到最高品质的服务，然后获取客户最深的尊重，始终遵循“碧桂园给您一个五星级的家”的服务理念，这才是物业的最高目标及动力源泉！",
          person: "碧桂园物业—李长江 总经理"
        },
        {
          title: "我们的客户bubuxxxxxxxxxxxxxxxxx说",
          imgSrc: require("../../../assets/img/BiGuiYuan-logo.png"),
          text:
            "服务不是作秀，以真诚之心，换以客户的放心，从而增加其信心，达到最高品质的服务，然后获取客户最深的尊重，始终遵循“碧桂园给您一个五星级的家”的服务理念，这才是物业的最高目标及动力源泉！",
          person: "碧桂园物业—李长江 总经理"
        }
      ],

      //middle部分假数据
      middleImgs: [
        {
          label: "商业大楼",
          imgs: {
            img1: require("@/assets/img/项目案例1.png"),
            img2: require("@/assets/img/项目案例1.png"),
            img3: require("@/assets/img/项目案例1.png"),
            img4: require("@/assets/img/项目案例1.png")
          }
        },
        {
          label: "住宅",
          imgs: {
            img1: require("@/assets/img/项目案例2.png"),
            img2: require("@/assets/img/项目案例2.png"),
            img3: require("@/assets/img/项目案例2.png"),
            img4: require("@/assets/img/项目案例2.png")
          }
        },
        {
          label: "公共",
          imgs: {
            img1: require("@/assets/img/项目案例3.png"),
            img2: require("@/assets/img/项目案例3.png"),
            img3: require("@/assets/img/项目案例3.png"),
            img4: require("@/assets/img/项目案例3.png")
          }
        },
        {
          label: "应急抢险",
          imgs: {
            img1: require("@/assets/img/项目案例2.png"),
            img2: require("@/assets/img/项目案例3.png"),
            img3: require("@/assets/img/项目案例1.png"),
            img4: require("@/assets/img/项目案例3.png")
          }
        },
        {
          label: "其他案例",
          imgs: {
            img1: require("@/assets/img/项目案例3.png"),
            img2: require("@/assets/img/项目案例3.png"),
            img3: require("@/assets/img/项目案例1.png"),
            img4: require("@/assets/img/项目案例2.png")
          }
        }
      ],
      //项目案例添加或删除类
      isPane: false
    };
  },
  mounted() {
    // 监听鼠标滚动事件
        window.addEventListener('scroll', ()=> {
        if(document.documentElement.scrollTop >= 1140 || document.body.scrollTop >= 1140){
             this.isPane = true
        }
    })
    
  },
  methods: {
    
  }
};
</script>
<style lang='scss' scoped>
.project-case {
  position: relative;
  width: 100%;
  height: 1520px;
  header {
    height: 500px;
    background: url("~@/assets/img/Mask-BitmapMask.jpg") no-repeat center;
    background-size: cover;
    color: #fff;
    overflow: hidden;
    h6 {
      text-align: center;
      font-size: 60px;
      font-weight: 500;
      margin-top: 5%;
    }
  }
  .middle {
    width: 100%;
    height: 600px;
    position: absolute;
    top: 200px;
    z-index: 2;
    overflow: hidden;
    // background-color: blanchedalmond;
    /deep/ .el-tabs--card {
      .el-tabs__header {
        background-color: rgba(0, 0, 0, 0);
        margin: 30px 450px 0;
        .el-tabs__item {
          color: #fff;
        }
        .is-active {
          background-color: #fff;
          color: black;
          font-weight: 600;
        }
      }
      .el-tabs__content {
        margin-top: 100px;
        height: 500px;
        text-align: center;
        .el-tab-pane {
          transform: translateX(100%);
          &.el-tab-pane-change {
            transform: translateX(0);
            transition: all 3s ease-in-out;
          }

          .img-item {
            display: inline-block;
            height: 375px;
            width: 284px;
            background-color: brown;
            overflow: hidden;

            &:hover {
              .hide-text {
                transition: all 0.5s;
                opacity: 1;
                transform: translateY(0);
                visibility: visible;
              }
            }
            .hide-text {
              transform: translateY(375px);
              position: relative;
              opacity: 0;
              visibility: hidden;
              height: 100%;
              width: 100%;
              color: #ffffff;
              background-color: rgba(0, 0, 0, 0.5);
              overflow: hidden;
              &::before {
                top: 104px;
                left: 50%;
                transform: translate(-50%, 0) rotate(45deg);
                position: absolute;
                height: 8px;
                width: 8px;
                background-color: #fff;
                content: "";
              }
              &::after {
                top: 100px;
                left: 50%;
                transform: translate(-50%, 0) rotate(45deg);
                position: absolute;
                height: 17px;
                width: 17px;
                box-sizing: border-box;
                border: 1px solid #fff;
                content: "";
              }
              h1 {
                margin-top: 45px;
                height: 42px;
                font-size: 30px;
              }
              p {
                text-align: left;
                margin-top: 50px;
                padding: 0 40px;
                font-size: 14px;
              }
              button {
                margin-top: 40px;
                width: 100px;
                height: 40px;
                color: #fff;
                background-color: #4f7bd9;
              }
            }
            &:nth-child(n) {
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
  footer {
    height: 1000px;
    .swiper-outside {
      width: 100%;
      height: 100%;
      .swiper-text {
        text-align: center;
        color: black;
        h1 {
          margin-top: 400px;
          font-size: 50px;
          font-weight: 500;
        }
        img {
          margin-top: 50px;
          margin-bottom: 5%;
          height: 86px;
          width: 139px;
        }
        p {
          font-size: 19px;
          padding: 3px 18.8%;
          box-sizing: border-box;

          &:last-child {
            font-size: 12px;
            color: #666666;
          }
        }
      }
      /deep/ .swiper-pagination {
        bottom: 74px;
        .swiper-pagination-bullet {
          border-radius: 0;
          opacity: 1;
          background-color: #ccc;
          transform: rotate(45deg);
          height: 6px;
          width: 6px;
          margin: 0 3.3%;
          position: relative;
          /*    &:before{
      content: '';
      position: absolute;
      top: -35px;
      left: -5px;
      transform: rotate(-45deg);
      display: block;
      height: 2px;
      width: 90px;
      background-color: #ccc;
     
     } */
        }
        .swiper-pagination-bullet-active {
          position: relative;
          background-color: #007aff;
          &::after {
            position: absolute;
            top: -3.5px;
            left: -3.5px;
            display: block;
            content: "";
            height: 11px;
            width: 11px;
            border: 1px solid #007aff;
          }
        }
      }
    }
  }
}
</style>